<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SBC WebRTC</title>



<link rel="stylesheet" href="css/style.css">


<!-- Include adapter.js to handle WebRTC differences between browsers -->

<script src="scripts/adapter.js"></script>
<!-- Include the JAIN SIP lib -->
<script src="scripts/jain-sip.js"></script>
<!-- Include the low level WebRTComm lib that sits on top of JAIN SIP and provides WebRTC media and SIP signaling facilities  -->
<script src="scripts/WebRTComm.js"></script>
<!-- Include the high level Restcomm Web library that sits on top of WebRTComm.js and provides an easy to use, a Twilio compatible API -->
<script src="scripts/RestCommWebClient.js"></script>

</head>

<body>
	<!-- html elements for local and remote media (audio and video if applicable -->
	<video id="localMedia" autoplay muted style="display: none;"></video>
	<video id="remoteMedia" autoplay style="display: none;"></video>

	<div class="pad">
		<div class="log" id="log">Registering...</div>
		<div class="dial-pad">


			<div class="contact">
				<div class="avatar" style="background-image: url(img/osky.png)"></div>
				<div class="contact-info">
					<div class="contact-name">Osky Carriles</div>
					<div class="contact-position">SBC</div>
					<div class="contact-number">2125</div>
				</div>
				<div class="contact-buttons">
					<button class="icon-message"
						style="background-image: url(img/comment_Bubble.png)"></button>
					<button class="icon-video"
						style="background-image: url(img/camera.png)"></button>
				</div>
			</div>
			<div class="phoneString">
				<input id='dialTarget' type="text" disabled>
			</div>
			<div class="digits">
				<div class="dig pound number-dig" name="1">1</div>
				<div class="dig number-dig" name="2">
					2
					<div class="sub-dig">ABC</div>
				</div>
				<div class="dig number-dig" name="3">
					3
					<div class="sub-dig">DEF</div>
				</div>
				<div class="dig number-dig" name="4">
					4
					<div class="sub-dig">GHI</div>
				</div>
				<div class="dig number-dig" name="5">
					5
					<div class="sub-dig">JKL</div>
				</div>
				<div class="dig number-dig" name="6">
					6
					<div class="sub-dig">MNO</div>
				</div>
				<div class="dig number-dig" name="7">
					7
					<div class="sub-dig">PQRS</div>
				</div>
				<div class="dig number-dig" name="8">
					8
					<div class="sub-dig">TUV</div>
				</div>
				<div class="dig number-dig" name="9">
					9
					<div class="sub-dig">WXYZ</div>
				</div>
				<div class="dig number-dig astrisk" name="*">*</div>
				<div class="dig number-dig pound" name="0">0</div>
				<div class="dig number-dig pound" name="#">#</div>
			</div>
			<div class="digits">
				<div class="dig addPerson action-dig"></div>
				<div class="dig-spacer"></div>
				<div class="dig goBack action-dig"></div>
			</div>
		</div>
		<div class="call-pad">
			<div class="log" id="log1">Registering...</div>

			<div class='pulsate'>
				<div></div>
				<div></div>
				<div></div>
			</div>
			<div class="ca-avatar" style="background-image: url(img/osky.png)"></div>
			<div class="ca-name">Osky Carriles</div>
			<div class="ca-number">2125</div>
			<div class="ca-status" data-dots="...">Calling</div>
			<div class="ca-buttons">
				<div class="ca-b-single" data-label="Add Contact"
					style="background-image: url(img/add_People.png)"></div>
				<div class="ca-b-single" data-label="Mute"
					style="background-image: url(img/mic.png)"></div>
				<div class="ca-b-single" data-label="Speaker"
					style="background-image: url(img/speaker.png)"></div>
				<div class="ca-b-single" data-label="Face to Face"
					style="background-image: url(img/facetoface.png)"></div>
				<div class="ca-b-single" data-label="Chat"
					style="background-image: url(img/message_Bubble.png)"></div>
				<div class="ca-b-single" data-label="Keypad"
					style="background-image: url(img/keypad.png)"></div>
			</div>


		</div>

		<div class="call action-dig">
			<div class="call-change">
				<span></span>
			</div>
			<div id='callButton' class="call-icon"></div>


		</div>
	</div>


		<script>

		var email = location.search.split('email=')[1];
		var idle = false;
		var incoming = false;
		
		var localMedia = document.getElementById("localMedia");
		var remoteMedia = document.getElementById("remoteMedia");
		//var callButton = document.getElementById("callButton");
		var currentConnection;

				
		var parameters = {
			'debug': true,
			'username': '21',
			'password': 'Demo2016',
			'registrar':'wss://10.0.0.10:5083',
			'domain':   '10.0.0.10'
		};

		// In order to use RestCommWebClient you first to setup the Device with parameters set above
		RestCommClient.Device.setup(parameters);
		
		
		// Pass a callback to get notified when RestCommWebClient is ready
		RestCommClient.Device.ready(function(device) {
			idle = true;
			log("Idle");
			
		});
		// Pass a callback to get notified when RestCommWebClient is ready
		RestCommClient.Device.offline(function(device) {
			idle = false;
			incoming = false;
			log("Offline");
		});

		// Pass a callback to get notified if a Device error occurs
		RestCommClient.Device.error(function(error) {
			idle = false;
			incoming = false;
			dismiss();
			log(error);
			
			setTimeout(function(){
      		  register();
      		}, 5000);

						
			
		});

		// Pass a callback to get notified when a connection is established successfuly
		RestCommClient.Device.connect(function(connection) {
			idle = false;
			callStarted();
			log("Successfully established call");
		});

		// Pass a callback to get notified when a connection is Ringing incoming
		RestCommClient.Device.incoming(function(connection) {
			idle = false;
			incoming = true;
			var parameters=connection.parameters;
			incomingOffer(parameters['From']);	
			log("Ringing ...");
			
			currentConnection = connection;
			currentConnection.disconnect(function(connection) {
				dismiss();
				log("Connection ended");
				setTimeout(function(){
      		  		log('Idle');
      			}, 2000);
				idle = true;
				incoming = false;

				
			});
		});

		// Pass a callback to get notified when a connection is Cancelled
		RestCommClient.Device.cancel(function(device) {
			idle = true;
			incoming = false;
			dismiss();

			log("Cancelled");
			setTimeout(function(){
				log("Idle");
      			}, 1000);
		});

		

		// When user presses Dial, this function is called that makes the actuall call
		function call() {
			
			
			
			var number = document.getElementById("dialTarget");
			

			if(number.length === 0) {
				return;
			}
						
			var target = number.value+("@10.0.0.10");
                	var parameters = {
				'username': target,
				'video-enabled': true,  // should we use WebRTC video or WebRTC audio only?
				'local-media': localMedia,
				'remote-media': remoteMedia,
			};

			// Make the actual call, using the parameters above
			currentConnection = RestCommClient.Device.connect(parameters);


			// Pass a callback to get notified when the connection is disconnected
			currentConnection.disconnect(function(connection) {
				dismiss();
				log("Connection ended");
				setTimeout(function(){
      		  		log('Idle');
      			}, 2000);
				idle = true;
				incoming = false;

				
			});

			// Pass a callback to get notified if a Connetion error occurs
			currentConnection.error(function(error) {
				idle = false;
				incoming = false;
				dismiss();
				log("Connection error: " + error);
				
			});
		}

		
		// When user presses Dial, in incoming state, this function is called that makes the actuall pickup
		function pickup() {
						
			var number = document.getElementById("dialTarget");
			var parameters = {
				'video-enabled': false,  // should we use WebRTC video or WebRTC audio only?
				'local-media': localMedia,
				'remote-media': remoteMedia,
			};

			// Make the actual call, using the parameters above
			currentConnection.accept(parameters);

		}


		function log(text) {
			$("#log").text(text);
			$("#log1").text(text);
		}

		function register() {
			idle = false;
			log("Registering...");
			RestCommClient.Device.destroy();
			RestCommClient.Device.setup(parameters);
		}

		// When user presses Hangup, this function is called that makes the actuall call
		function hangup() {
			idle = true;
			incoming = false;
			dismiss();
			RestCommClient.Device.disconnectAll();
			
		}

		function waitIdle() {
			setTimeout(function(){
			if(!idle) {
				log("Waiting to come idle ...");
      		  	waitIdle();
			}
			else {
				attach(email);
				log("come idle");
			}
      		}, 1000);
		}


		</script>
	<script src="js/jquery-min.js"></script>
	<script src="js/index.js"></script>
	<script>
	
	waitIdle();
	</script>

</body>
</html>
